<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>区域信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/common/layui/css/layui.css" media="all">
    <style type="text/css">
        .calss-a {
            text-decoration: underline !important;
        }

    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-input-inline" style="width: 288px;">
        <input type="text" name="keyword" id="keyword" placeholder="请输入查询的区县名" autocomplete="off" class="layui-input" maxlength="8">
    </div>
    <div class="layui-input-inline" style="width: 100px;">
        <label class="layui-form-label">
            <button class="layui-btn" onclick="keyword()">查询</button>
        </label>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="barDemo"></table>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="sex" value="{{d.county_id}}" lay-skin="switch" lay-text="是|否" lay-filter="sexDemo" {{ d.showCode== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="imgTpl">
    {{#
    var fn = function(obj){
    var json= JSON.parse(obj);
    return json.maxPath;
    };
    }}
    <div>
        <img src="{{ fn(d.imgPath) }}">
    </div>

</script>
</body>
<script type="text/javascript" src="/static/common/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/common/layui/layui.js"></script>
<script type="text/javascript">
    keyword();
    function keyword() {
        var keyword=$("#keyword").val().trim();
        layui.use('table', function () {
            var table = layui.table,
                    form = layui.form;
            table.render({
                elem: '#test',
                url: '/basics/county/ajaxList.do?keyword='+keyword,
                cellMinWidth: 80,
                limit:20,
                cols: [[
                    {field: 'county_id', title: 'ID', width: "10%", sort: true},
                    {field: 'create_time', title: '创建时间', width: "10%"},
                    {field: 'modify_time', title: '修改时间', width: "10%",sort: true},
                    {field: 'name', title: '名称', width: "10%"},
                    {field: 'coordinate', title: '坐标', width: "12%", sort: true},
                    {field: 'imgPath', title: '图片', width: "10%", templet: "#imgTpl"},
                    {field: 'showCode', title: '是否上线', width: "5%", templet: '#switchTpl'},
                    {field: 'showCode', title: '操作', width: 180, templet: '#barDemo'},
                ]],
                page: true
            });
            //监听性别操作
            form.on('switch(sexDemo)', function (obj) {
                $.post("/basics/county/status.do",{id:obj.value} , function (result, status) {
                    if(status=="success"){
                        layer.msg('操作成功!', {icon: 1});
                    }else {
                        layer.msg('操作失败!', {icon: 2});
                    }
                }, "json");
            });
            //监听工具条
            table.on('tool(barDemo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.post("/basics/county/delete.do",{id:data.county_id} , function (result, status) {
                            if(status=="success"){
                                layer.msg('删除成功!', {icon: 1});
                            }else {
                                layer.msg('删除失败!', {icon: 2});
                            }
                        }, "json");
                    });
                } else if (layEvent === 'edit') { //编辑
                    window.location.href="/basics/county/edit.do?id="+data.county_id;
                }
            });
        });
    }
</script>
</html>